<template>
  <Option v-bind="$attrs">
    <template #default v-if="multiple">
      <div class="Option-flex">
        <el-checkbox :disabled="$attrs.disabled" :label="$attrs.value" :modelValue="isCheck">
          <i></i>
        </el-checkbox>
        <slot>
          <div class="label-txt">
            {{ $attrs.label }}
          </div>
        </slot>
      </div>
    </template>
  </Option>
</template>
<script setup lang="ts" name="ElOption">
import * as ElementPlus from "element-plus";
import { inject, computed, useAttrs } from "vue";
const Option: any = ElementPlus.ElOption;
const multiple = inject("multiple");
const modelValue: any = inject("modelValue");
const $attrs = useAttrs();
const isCheck = computed(() => {
  return Array.isArray(modelValue()) && modelValue().includes($attrs.value);
});
</script>
<style lang="scss" scoped>
.Option-flex {
  display: flex;
  align-items: center;
  .el-checkbox {
    flex: 0 0 var(--el-checkbox-input-width);
  }
  .label-txt {
    flex: 1;
  }
}
</style>
